<style>
  .bottom-container {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99999;
    text-align: center;
    padding-bottom: 0;
    background: rgba(4,4,4,.71);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .bottom-container-default {
    position: relative;
    height: 100px;
    line-height: 100px;
  }

  .bottom-container-default-img {
    cursor: pointer;
  }

  .appointment-arrow {
    background-size: 100%;
    position: relative;
    cursor: pointer;
    width: 34px;
    height: 32px;
    margin-left: 20px;
    top: 0px;
    animation: move 2s infinite linear;
  }

  .appointment-arrow-close {
    display: none;
  }

  .bottom-container-appointment {
    width: 900px;
    height: 360px;
    display: flex;
    justify-content: space-between;
    background: #FFFFFF;
  }

  .bottom-container-appointment-left {
    margin-top: 22px;
    margin-left: 40px;
    display: flex;
    flex-direction: column;
  }

  .bottom-container-appointment-left-title {
    color: #93412C;
    font-size:26px;
    font-family: Source Han Sans CN;
    font-weight: bold;
  }

  .bottom-container-appointment-left-subtitle {
    margin-top: 5px;
    color: #93412C;
    font-size: 18px;
    font-family: Source Han Sans CN;
  }

  .bottom-container-appointment-left-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 40px;
  }

  .bottom-container-appointment-left-form > div:nth-child(1) {
    margin-top: 20px;
  }

  .bottom-container-appointment-left-form > div {
    margin-top: 15px;
  }

  .bottom-container-appointment-left-form > div > label {
    color: #333333;
  }

  .bottom-container-appointment-left-form > div > input {
    padding: 2px 6px
  }

  .bottom-container-appointment-left-tip {
    margin-top: 15px;
    color: #93412C;
    font-size: 14px;
  }

  .bottom-container-appointment-center {
    position: relative;
    margin-top: 22px;
  }

  .bottom-container-appointment-center-line {
    width: 1px;
    height: 316px;
    background: #cccccc;
  }

  .bottom-container-appointment-center-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: absolute;
    left: -40px;
    top: 40%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #93412C;
    color: #FFFFFF;
  }

  .bottom-container-appointment-center-btn > span {
    width: 38px;
    font-size: 18px;
    font-weight: 400;
  }

  .bottom-container-appointment-right {
    margin-top: 22px;
    padding-right: 45px;
    padding-top: 20px;
  }
  .bottom-container-appointment-right > img {
    width: 286px;
  }

  .bottom-container-blank {
    height: 30px;
  }

  @keyframes move {
    0% {
      margin-top: -25px;
    }
    25% {
      margin-top: 5px;
    }
    50% {
      margin-top: 25px;
    }
    75% {
      margin-top: 5px;
    }
    100% {
      margin-top: -25px;
    }
  }

  ::-webkit-input-placeholder {
    color: #cccccc;
    font-size: 15px;
  }

</style>
<div class="bottom-container">
  <div class="bottom-container-default">
    <img class="bottom-container-default-img" src="https://res.bestyoujia.com/web/ZMYJ/assets/img/bottom/baojia.png" style="margin-right: 15px" />
    <img class="bottom-container-default-img" src="https://res.bestyoujia.com/web/ZMYJ/assets/img/bottom/icon_text.png" />
    <img class="appointment-arrow appointment-arrow-open" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/bottom/pc/open.png" />
    <img class="appointment-arrow appointment-arrow-close" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/bottom/pc/retract.png" />
  </div>
  <div class="bottom-container-appointment">
    <div class="bottom-container-appointment-left">
      <span class="bottom-container-appointment-left-title">提前算一算，美学整配需要多少钱</span>
      <span class="bottom-container-appointment-left-subtitle">- 今天您是第128位业主获取报价 -</span>
      <div class="bottom-container-appointment-left-form">
        <div>
          <label><span style="visibility: hidden">*</span>楼盘名称：</label>
          <input id="bottom-building" placeholder="请填写您的楼盘名称" />
        </div>
        <div>
          <label><span style="visibility: hidden">*</span>房屋户型：</label>
          <input id="bottom-house" placeholder="例如3室2厅2卫" />
        </div>
        <div>
          <label><span style="visibility: hidden">*</span>建筑面积：</label>
          <input id="bottom-area" placeholder="" style="width: 130px" /><span style="color: #333333;margin-left: 5px">㎡</span>
        </div>
        <div>
          <label><span style="color: #B94047">*</span>手机号码：</label>
          <input id="bottom-mobile" placeholder="请填写您的手机号码" style="" />
        </div>
      </div>
      <p class="bottom-container-appointment-left-tip">*为了您的权益，您的隐私将被严格保密</p>
    </div>
    <div class="bottom-container-appointment-center">
      <div class="bottom-container-appointment-center-line"></div>
      <div class="bottom-container-appointment-center-btn">
        <span>开始计算</span>
      </div>
    </div>
    <div class="bottom-container-appointment-right">
      <img src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/bottom/pc/right.png" />
    </div>
  </div>
  <div class="bottom-container-blank"></div>
</div>
<script type="text/javascript">

  let showBottomAppointment = false;
  $('.bottom-container-appointment').animate({ height: 0 }, 0);
  $('.bottom-container-blank').hide();

 $('.appointment-arrow-close').on('click', function () {
     showBottomAppointment = false;
     $(this).hide();
     $('.appointment-arrow-open').show();
     $('.bottom-container-appointment').animate({ height: 0 }, 400);
     $('.bottom-container-blank').hide();
     $('footer').css('margin-bottom', '100px');
 });
 $('.appointment-arrow-open').on('click', function () {
     showBottomAppointment = true;
     $(this).hide();
     $('.appointment-arrow-close').show();
     $('.bottom-container-appointment').animate({ height: 360 }, 400);
     $('.bottom-container-blank').show();
     $('footer').css('margin-bottom', '490px');
 });

  $('.bottom-container-default-img').on('click', function () {
      if(showBottomAppointment) {
          showBottomAppointment = false;
          $('.appointment-arrow-open').show();
          $('.appointment-arrow-close').hide();
          $('.bottom-container-appointment').animate({ height: 0 }, 400);
          $('.bottom-container-blank').hide();
          $('footer').css('margin-bottom', '100px');
      } else {
          showBottomAppointment = true;
          $('.appointment-arrow-open').hide();
          $('.appointment-arrow-close').show();
          $('.bottom-container-appointment').animate({ height: 360 }, 400);
          $('.bottom-container-blank').show();
          $('footer').css('margin-bottom', '490px');
      }
  });

  $('.bottom-container-appointment-center-btn').on('click', function () {
      window.page_position = '通用底栏-计算报价';

      const building = $('#bottom-building').val();
      const housing = $('#bottom-house').val();
      const area = $('#bottom-area').val();
      const mobile = $('#bottom-mobile').val();

      const mobileStatus = validMobile(mobile);

      switch (mobileStatus) {
          case 1:
              layer.msg('预约中，请稍候...', {
                  icon: 16
                  ,shade: 0.01
              });

              const data = {
                  mobile,
                  housing,
                  building,
                  area,
              };

              doAppointment(
                  data,
                  function(res) {
                      console.log('onAppointmentSuccess', res);
                      const { data = '' } = res;
                      if (data) {
                          buryingPoint('APPOINTMENT', data);
                          layer.closeAll();
                          showToast('预约成功', 'success');
                          $('#bottom-building').val('');
                          $('#bottom-house').val('');
                          $('#bottom-area').val('');
                          $('#bottom-mobile').val('');
                      }
                  },
                  function(err) {
                      console.log('onAppointmentError', err);
                      layer.closeAll();
                      showToast('抱歉，预约失败～', 'fail');
                      $('#bottom-building').val('');
                      $('#bottom-house').val('');
                      $('#bottom-area').val('');
                      $('#bottom-mobile').val('');
                  }
              );
              break;
          case 2:
              showToast('手机号码格式不正确', 'fail');
              break;
          case 3:
              showToast('手机号码不能为空', 'fail');
              break;
      }
  });

</script>